// 选择按钮
function selectButton(){
    let sort_text=document.querySelector('.substance_text')
    let sort_btns=document.querySelectorAll('.sort_btn button')
    let sort_inp=document.querySelector('.substance_inp')
    sort_btns.forEach(function(open,index){
        open.addEventListener('click',function(){
            // console.log(open.textContent);
            sort_text.textContent =open.textContent
            sort_btns.forEach(function(open){
                open.className = ''
            })
            this.className = 'sort_btn_bg'
            // sort_inp.placeholder=open.textContent
            // 搜索框 数据的切换
            switch(index){
                case 0:
                    sort_inp.placeholder="身份证实名"
                break;
                case 1:
                    sort_inp.placeholder="服务类的"
                break;
                case 2:
                    sort_inp.placeholder="金融科技类的"
                break;
                case 3:
                    sort_inp.placeholder="交通地理类的"
                break;
                case 4:
                    sort_inp.placeholder="充值缴费类的"
                break;
                case 5:
                    sort_inp.placeholder="数据智能类的"
                break;
                case 6:
                    sort_inp.placeholder="企业工商类的"
                break;
                case 7:
                    sort_inp.placeholder="应用开发类的"
                break;
                case 8:
                    sort_inp.placeholder="电子商务类的"
                break;
                case 9:
                    sort_inp.placeholder="吃喝玩乐类的"
                break;
                case 10:
                    sort_inp.placeholder="文娱视频类的"
                break;
                case 11:
                    sort_inp.placeholder="免费接口大全类的"
                break;
                case 12:
                    sort_inp.placeholder="短信类的"
                break;
                case 13:
                    sort_inp.placeholder="汽车类的"
                break;
                case 14:
                    sort_inp.placeholder="核验类的"
                break;
                case 15:
                    sort_inp.placeholder="最新发布的"
                break;
                case 16:
                    sort_inp.placeholder="API私有化部署"
                break;
                
            }
        })
    })
}
selectButton()


// 主体内容区域
function substance(){
// 来接受所有的li  批量注册点击事件
let substance =document.querySelectorAll('.substance_cont>li')
let subsbut =document.querySelectorAll('.substance_cont>li button')
substance.forEach(function(open,i){
    // 鼠标移入事件
    open.addEventListener('mouseover',function(){
        open.className='substance_li'
        subsbut[i].className='substance_cont_btn'
    })
    // 鼠标移出事件
    open.addEventListener('mouseleave',function(){
        open.className='substance_li1'
        subsbut[i].className='substance_cont_btn1'
        // open.classList.add('substance_li')
  
    })
})

}
substance()
// 鼠标点击切换登录方式
function switchLogin(){
    let modalTitle = document.querySelectorAll('.modal_box_title>p')
    let mod=document.querySelectorAll('.modal_box_cont>div')
    modalTitle.forEach(function(open,i){
        open.addEventListener('click',function(){
            modalTitle.forEach(function(open,i){
                open.classList.remove('modal_box_tit_col')
                mod[i].classList.remove('modal_box_modal_show')
            })
            open.classList.add('modal_box_tit_col')
            mod[i].classList.add('modal_box_modal_show')
        })
    })
}
switchLogin()
let subsbut =document.querySelectorAll('.substance_cont>li button')
let modal=document.querySelector('.modal')
subsbut.forEach(function(open){
    open.addEventListener('click',function(){
        modal.classList.add('modal_show')
    })
})
let guanbi=document.querySelector('.modal_box .modal_close')
guanbi.addEventListener('click',function(){
    modal.classList.remove('modal_show')
})











